<h1>Asignar Evaluadores</h1>

<div class="alert alert-info">
	<table>
		<tr>
			<td>
				<img src=<%= @charla.conferencia.cargarImagen() %> class="img-thumbnail" style="border-radius: 5%; height:100px;">
			</td>
			<td>
				<div>
					<div>
						<h2><%= @charla.titulo%> <small><%= @charla.conferencia.nombre%></small></h2>
					</div>  
					<div>
						<p><%= @charla.abstract%></p>
					</div> 
				</div>
			</td>
		</tr>
	</table>
</div>

<% if @message != nil %>
	<p class="alert alert-danger text-danger"><%= @message %></p>
<% end %>

<form method="post" action="/asignarCharla">
	<input type="hidden" name="idCharla" value="<%= @charla.id %>">
	
	<input id="textbox" type="text" placeholder="Buscar Usuario..." class="filter form-control" name="userNotSelected" style="width:50%"> 
	<br/>
	<div class="col-md-3 box1" >
		<label for="bootstrap-duallistbox-nonselected-list_duallistbox_demo2">Usuarios No seleccionados</label>
		<br/>
		<div class="btn-group buttons">
			<button type="button" class="btn btn-default move" title="Move selected" onclick="moveOptions(this.form.SelectLeft, this.form.SelectRight);">
			<i class="glyphicon glyphicon-arrow-right"></i></button>
		</div> 
		<select id="select" name="SelectLeft" data-duallistbox_generated="true" class="form-control" size="10" multiple="multiple">
	    	<% @usuariosDisponibles.each do |usuario| %>
	        	<option value="<%= usuario.id %>" style="display:none;"><%= usuario.nombre%> <%= usuario.apellido%></option>
	        <% end %>
		</select>
    </div>       
	
	<div class="col-md-3 box1">
		<label for="bootstrap-duallistbox-nonselected-list_duallistbox_demo2">Usuarios Seleccionados</label>
		<br/>
		<div class="btn-group buttons">
			<button type="button" class="btn btn-default remove" title="Move selected" onclick="moveOptions(this.form.SelectRight, this.form.SelectLeft);">
			<i class="glyphicon glyphicon-arrow-left"></i></button>
		</div>
		<select name="SelectRight" data-duallistbox_generated="true" class="form-control" multiple="multiple" size="10"  >
			<% @usuariosGuardados.each do |usuario| %>
	        	<option value="<%= usuario.id %>"><%= usuario.nombre%> <%= usuario.apellido%></option>
	        <% end %>
	    </select>
    </div>  
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <input type="submit" value="Guardar" class="btn btn-primary" onClick="selectAll(this.form.SelectRight)"/>
    <input type="submit" value="Volver" onClick="volver(this, <%= @charla.conferencia_id %>)" class="btn btn-default"/>
</form>

<script type="text/javascript">
	function selectAll(select) {
		var selLength = select.length;
		for(i=selLength-1; i>=0; i--) {
	    	select.options[i].selected = true
	    }
	    select.name = select.name + "[]"
	    return true;
	}
	
  	function volver(button, idConferencia) {
	  button.form.method = 'get'
	  button.form.action = '/verCharlas/' + idConferencia
	  return true
	}
	
	function addOption(theSel, theText, theValue)
	{
	  var newOpt = new Option(theText, theValue);
	  var selLength = theSel.length;
	  theSel.options[selLength] = newOpt;
	}

	function deleteOption(theSel, theIndex)
	{ 
	  var selLength = theSel.length;
	  if(selLength>0)
	  {
	    theSel.options[theIndex] = null;
	  }
	}
	
	function moveOptions(theSelFrom, theSelTo)
	{
	  var selLength = theSelFrom.length;
	  var selectedText = new Array();
	  var selectedValues = new Array();
	  var selectedCount = 0;
	  
	  var i;
	  
	  for(i=selLength-1; i>=0; i--)
	  {
	    if(theSelFrom.options[i].selected)
	    {
	      selectedText[selectedCount] = theSelFrom.options[i].text;
	      selectedValues[selectedCount] = theSelFrom.options[i].value;
	      deleteOption(theSelFrom, i);
	      selectedCount++;
	    }
	  }
	
	  for(i=selectedCount-1; i>=0; i--)
	  {
	    addOption(theSelTo, selectedText[i], selectedValues[i]);
	  }
	}
</script>
<script>
	jQuery.fn.filterByText = function(textbox, selectSingleMatch) {
        return this.each(function() {
            var select = this;
            var options = [];
            $(select).find('option').each(function() {
                options.push({value: $(this).val(), text: $(this).text()});
            });
            $(select).data('options', options);
            $(textbox).bind('change keyup', function() {
                var options = $(select).empty().data('options');
                var search = $.trim($(this).val());
                var regex = new RegExp(search,"gi");
              
                $.each(options, function(i) {
                    var option = options[i];
                    if((textbox.val().length > 2) && (option.text.match(regex) !== null)) {
                        $(select).append(
                           $('<option>').text(option.text).val(option.value)
                        );
                    }
                });
                if (selectSingleMatch === true && $(select).children().length === 1) {
                    $(select).children().get(0).selected = true;
                }
            });            
        });
    };

    $(function filtrar() {
        $('#select').filterByText($('#textbox'), true);
    });
    
</script>